<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../js/echarts.js"></script>
    <title>波浪图</title>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
  </body>
  <script>
    const data = [620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220, 620]
  </script>
  <script>
    const chart = echarts.init(document.getElementById('chart'))
    chart.setOption({
      // 坐标轴位置
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      },
      xAxis: {
        type: 'category', // 类目轴
        boundaryGap: false // 不留白 取消X轴边距
      },
      yAxis: {
        show: false // 隐藏
      },
      series: [
        {
          type: 'line',
          data: data,
          areaStyle: {
            color: 'rgba(95,187,255.5)' // 覆盖颜色
          },
          lineStyle: {
            width: 0 // 折线宽度0
          },
          itemStyle: {
            opacity: 0 // 折线点透明度
          },
          smooth: true // 线条平滑
        }
      ]
    })
  </script>
</html>
